<%@ taglib uri="/WEB-INF/functions.tld" prefix="uf" %>

<input type="hidden" name="link" id="link" value="${feature.featureLink}"/>

<c:set var="insertSuccessUser" value="Usu&aacute;rio inserido com sucesso!"/>
<c:set var="insertErrorUser" value="Ocorreu um erro na inser&ccedil;&atilde;o do usu&aacute;rio"/>
<c:set var="editSuccessUser" value="Usu&aacute;rio editado com sucesso!"/>
<c:set var="editErrorUser" value="Ocorreu um erro na edi&ccedil;&atilde;o do usu&aacute;rio"/>

<div class="btnSpace">
	<button onclick="showContentUser();" title="Adicionar novo usuario" class="skin_colour round_all" title="+ Adicionar Novo">
		<img width="24" height="24" src="contents/images/images/icons/small/white/Upload.png" alt="+ Adicionar novo">
	<span>+ Adicionar novo</span>
	</button>
</div>

<div class="box grid_16 round_all">
	<table class="display table"> 
		<thead> 
			<tr> 
				<th>Id</th>
				<th>Usuario</th> 
				<th>Senha</th>
				<th>Perfil</th>  
				<th>Fun&ccedil;&otilde;es</th> 
			</tr> 
		</thead>
		<tbody>
			<c:forEach items="${uf:getUsers()}" var="user">
				<c:if test="${user.userId eq param.idUser}">
					<c:set var="editUser" value="${user}"/>
				</c:if>
				<tr class="gradeA">
					<td>${user.userId}</td> 
					<td>${user.userName}</td> 
					<td>${uf:camuflatePass(user.userPassword)}</td>
					<td>${user.role.roleName}</td> 
					<td class="center"">
						<c:set var="color" value="red"/>
						<c:set var="idUser" value="${user.userId}"/>
						<c:if test="${user.active}">
							<c:set var="color" value="green"/>
						</c:if>
						<input type="hidden" id="user_${user.userId}" value="${user.active}"/>
						<button id="userStat_${user.userId}" onclick="changeStatsUser('${user.userId}');" title="Clique para mudar o status" class="${color} skin_colour round_all btnKind">
							<img width="24" height="24" src="contents/images/images/icons/small/white/Facebook%20Like.png">
						</button>
						<button id="userStat_${user.userId}" onclick="editUserBtn('${user.userId}');" title="Clique para editar" class="blue skin_colour round_all btnKind btnEdit">
							<img width="24" height="24" src="contents/images/images/icons/small/white/Pencil.png">
						</button>
					</td>
				</tr>
			</c:forEach>
		</tbody> 
	</table>
</div>

<input type="hidden" id="last_id_user" name="last_id_user" value="${idUser + 1}"/>

<style type="text/css">
	.btnSpace {
		padding-left:10px;
	}
	.btnKind {
		margin-bottom:-8px;
		padding:4px 0 5px;
	}	
	.btnEdit {
		margin: -19px 0 0 40px;
	}
	
	.black_overlay {
	    background-color: black;
	    height: 100%;
	    left: 0;
	    opacity: 0.7;
	    overflow: auto;
	    position: fixed;
	    top: 0;
	    width: 100%;
	    z-index: 999;
	}
	
	.popSuccess{
		background: none repeat scroll 0 0 #F3F3F3;
		display: table;
	    border-radius: 5px 5px 5px 5px; 
	    border-top: 18px solid #4C5766; 
	    box-shadow: 0 0 6px #141414; 
	    left: 500px; 
	    padding-bottom: 20px; 
	    position: fixed; 
	    top: 200px; 
	    width: 430px; 
	    z-index: 1000;
	}
	
	.popSuccess p {
		margin: 25px 30px 5px 95px;
		font-size: 20px;
	}
	
	.popSuccess .fechar {
	    background: url("contents/images/ico-fechar.png") no-repeat scroll 0 0 transparent;
	    cursor: pointer;
	    height: 31px;
	    position: absolute;
	    right: -14px;
	    top: -33px;
	    width: 31px;
	    z-index: 1000;
	}
	
	.fechar {
	    background: url("contents/images/ico-fechar.png") no-repeat scroll 0 0 transparent;
	    cursor: pointer;
	    height: 31px;
	    position: absolute;
	    right: -14px;
	    top: -17px;
	    width: 31px;
	    z-index: 999;
	}
</style>

<script type="text/javascript">
	
	function fecharUser() {
		$("#black_overlay_user").hide("fade");
		$("#success_dialog_user").hide("fade");
		$("#insertContentUser").hide("fade");
	}
	
	function changeStatsUser(userId,action) {
		var status = $("#user_" + userId).val();

		var action = "ENABLE";
		
		if (status == 'true') {
			action = "DISABLE";
		}

		url = "Service-User?type="+action+"&userId=" + userId;
		jQuery.get(url,function(data){
			data = trim(data);
			
			if (data == "SUCCESS") {
				if(action == 'ENABLE') {
					$("#userStat_" + userId).removeClass("red");
					$("#userStat_" + userId).addClass("green");
				} else {
					$("#userStat_" + userId).removeClass("green");
					$("#userStat_" + userId).addClass("red");
				}
				
				$("#user_" + userId).val(action == 'ENABLE');
			} else {
				$("#error").show();
			}
		});
	};
	
	function showContentUser() {
		$("#userId").val($("#last_id_user").val());
		$("#insertContentUser").show("fade");
		$("#black_overlay_user").show("fade");
		$("#insertContentUser").focus();
	};
	
	function editUserBtn(idUser) {
		var link = $("#link").val();
		window.location = "./"+ link +"?idUser=" + idUser;
	};
	
	function reload(param, value) {
		var link = $("#link").val();
		window.location = "./"+ link +"?"+ param + "=" + value;
	};
	
	function saveUser() {
		url = "Service-User?type=INSERT&user=";
		callServiceUser(url, 'insert');
	};
	
	function editUser() {
		url = "Service-User?type=UPDATE&user=";
		callServiceUser(url, 'edit');
	};
	
	function callServiceUser(url, value) {
		var userForm = document.userForm;
		
		var role = new RoleUser();
		role.setRoleId($("#roleSelect").val());
		
		var userActive = $("#userActive").val();
		var userId = $("#userId").val();
		var userName = $("#userName").val();
		var userPassword = $("#userPassword").val();
			
		if(userName == '' || userPassword == '') {
			$("#user_error_div").html("Preencha todos os campos!");
			$("#user_error").show();
			return false;
		}
		
		var user = new User();
		if (userActive != null) {
			user.setActive(userActive != '' && userActive == 'true' ? true : false);
		}
		if (userId != '') {
			user.setUserId(userId);
		}
		user.setUserName(userName);
		user.setUserPassword(userPassword);
		user.setRole(role);
		user = JSON.stringify(user);
		
		url = url + user;
		
		jQuery.get(url,function(data){
			data = trim(data);
			
			if (data == "SUCCESS") {
				userForm.reset();
				reload('success_user', value);
			} else {
				reload('error_user', value);
			}
		});
	}
	
	function RoleUser() {
		var roleId;
		
		this.setRoleId=function(roleId) {
			this.roleId = roleId;
		};
		
		this.getRoleId=function() {
			return this.roleId;
		};
	};	
	
	function User() {
		
		var active;
		var userId;
		var userName;
		var userPassword;
		var role;
		
		function User() {
		};
		
		this.getActive = function() {
			return this.active;
		};
		
		this.getRoleId = function() {
			return this.userId;
		};
		
		this.getUserName = function() {
			return this.userName;
		};
		
		this.getUserPassword = function() {
			return this.userPassword;
		};
		
		this.getRole = function() {
			return this.role;
		};	
		
		this.setActive = function(active) {
			this.active = active;
		};
		
		this.setUserId = function(userId) {
			this.userId = userId;
		};
		
		this.setUserName=function(userName) {
			this.userName = userName;
		};
		
		this.setUserPassword =function(userPassword) {
			this.userPassword =  userPassword;
		};
		
		this.setRole =function(role) {
			this.role =  role;
		};
		
	};
</script>

<c:set var="insert" value="${param.success_user eq null or param.success_user eq '' ? false : true}"/>

<div style="display: ${insert or not empty editUser ? 'block' : 'none'};" onclick="fecharUser();" id="black_overlay_user" class="black_overlay"></div>
<div style="display: ${insert ? 'block' : 'none'};" id="success_dialog_user" class="popSuccess">
	<div onclick="fecharUser('1');" href="javascript:void(0);" class="fechar"></div>
	<p>${param.success_user eq 'insert' ? insertSuccessUser : editSuccessUser}</p>
</div>


<div id="insertContentUser" class="box grid_8 round_all" style="display: ${not empty editUser ? 'block' : 'none'};position:fixed; left:30%; top:100px;z-index:1000;">
	<h2 class="box_head grad_colour">Usu&aacute;rios</h2>
	<div onclick="fecharUser('1');" href="javascript:void(0);" class="fechar"></div>
	<div class="toggle_container">
		<div class="block">
			<form name="userForm" id="userForm" action="." method="POST">
				<input id="userActive" disabled name="userActive" type="hidden" class="small" value="${editUser.active}"/>
				
				<label>Id:</label>
				<input title="User Id" id="userId" disabled name="userId" type="text" class="small" value="${editUser.userId}"/> 
				
				<label>Username:</label>
				<input title="Give the user name" ${not empty editUser ? 'disabled' : ''} id="userName" name="userName" type="text" class="large" value="${editUser.userName}"/> 

				<label>Password:</label>
				<input title="Give the user description" id="userPassword" name="userPassword" type="password" class="large" value="${editUser.userPassword}"/>

				<label>Perfil:</label>
				
				<div class="input_group">
					<select id="roleSelect" name="roleSelect">
						<c:forEach items="${uf:getRoles()}" var="role">
							<c:set var="selected" value="${not empty editUser ? (editUser.role.roleId == role.roleId  ? 'selected=true' : '') : 'true'}"/>
							<c:if test="${role.active}">
								<option value="${role.roleId}" ${selected}>${role.roleName}</option>
							</c:if>
						</c:forEach>
					</select>
				</div>
				<button type="button" class="button_colour round_all" onClick="${not empty editUser ? 'editUser();' : 'saveUser();'}"><img height="24" width="24" alt="Bended Arrow Right" src="contents/images/images/icons/small/white/Bended%20Arrow%20Right.png"><span>Save</span></button>
				<br/><br/>
				<div id="user_error" name="user_error" class="alert alert_red" style="display: ${not empty param.error ? 'block' : 'none'}">
					<img width="24" height="24" src="contents/images/images/icons/small/white/Alert%202.png">
					<strong id="user_error_div">${param.error_user eq 'insert' ? insertErrorUser : editErrorUser}</strong>
				</div>
			</form>
		</div>
	</div>
</div>